<template>
  <div>
    <v-row style="padding: 0 12px">
      <v-row class="mx-3 mx-sm-n8 flex-scroll" no-gutters align="start" style="width: 100%">
        <h1 style="font-size: 20px">{{ $t('searchbym') }}</h1>
      </v-row>
      <v-row class="my-0 my-sm-10 mx-sm-n8 flex-scroll" style="padding: 0 12px">
        <v-item-group
          :value="form.brand.map((id) => brandList.findIndex((i) => i.id === id))"
          multiple
          @change="
            (val) => {
              form.brand = val.map((i) => brandList[i].id);
              $emit('change');
            }
          "
        >
          <v-container>
            <v-row align="center" class="flex-scroll" style="padding-right: 30px">
              <template v-for="(item, i) in brandList">
                <v-item v-slot="{ active, toggle }" :key="i">
                  <v-card
                    class="sign mx-3"
                    :class="active ? 'active-brand' : ''"
                    :color="active ? 'grey lighten-1' : ''"
                    @click="searchCar(item, toggle)"
                  >
                    <v-img
                      contain
                      class="sign-img"
                      width="117px"
                      height="87px"
                      :src="item.brand_logo"
                    />
                    <v-row justify="center" class="brand-name">
                      {{ item.brand_name }}
                    </v-row>
                  </v-card>
                </v-item>
              </template>
            </v-row>
          </v-container>
        </v-item-group>
      </v-row>
      <v-row
        v-if="categoryList?.length"
        style="width: 100%"
        class="mx-3 my-0 mx-sm-n8 flex-scroll"
        no-gutters
        align="center"
      >
        <h4>{{ $t('searchbyt') }}</h4>
      </v-row>
      <v-row
        v-show="true"
        v-if="categoryList?.length"
        class="mx-sm-n8 my-sm-10 flex-scroll"
        style="padding: 0 12px"
      >
        <v-item-group
          :value="form.category.map((id) => categoryList.findIndex((i) => i.id === id))"
          multiple
          @change="
            (val) => {
              form.category = val.map((i) => categoryList[i].id);
              $emit('change');
            }
          "
        >
          <v-container>
            <v-row align="center" class="flex-scroll" style="padding-right: 30px">
              <template v-for="(item, i) in categoryList">
                <v-item v-slot="{ active, toggle }" :key="i">
                  <v-card
                    class="sign mx-3"
                    :class="active ? 'active-brand' : ''"
                    :color="active ? 'grey lighten-1' : ''"
                    @click="searchCar(item, toggle)"
                  >
                    <v-img contain class="sign-img" width="117px" height="87px" :src="item.image" />
                    <v-row justify="center" class="brand-name">
                      {{ item.name }}
                    </v-row>
                  </v-card>
                </v-item>
              </template>
            </v-row>
          </v-container>
        </v-item-group>
      </v-row>
    </v-row>
  </div>
</template>

<script>
export default {
  name: 'SearchOptions',
  props: {
    form: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      brandList: [],
      categoryList: []
    };
  },

  async fetch() {
    await this.getBrandAndCategory();
  },
  methods: {
    async getBrandAndCategory() {
      try {
        const res = await this.$api.post('/home/getBrandAndCategory', {});
        this.brandList = res.brandList.splice(0, 8);
        this.categoryList = res.categoryList.splice(0, 8);
      } catch (error) {
        // console.log(error);
      }
    },
    searchCar(item, toggle) {
      toggle();
    }
  }
};
</script>
<style scoped lang="scss">
.search {
  margin-bottom: 42px;
}

@media screen and (max-width: 600px) {
  .search-input {
    width: 90vw !important;
  }
  .container {
    width: 100vw;
  }
  .v-item-group {
    margin: 20px !important;
  }
  .search-title {
    width: 100% !important;
    height: 33px;
    margin-left: 12px !important;
    margin-bottom: 12px;
    font-family: Poppins, Poppins;
    font-weight: 600;
    font-size: 24px;
    color: #3b3a40;
    line-height: 35px;
    text-align: left !important;
    font-style: normal;
  }
  .flex-scroll {
    flex-wrap: nowrap;
    overflow-x: scroll;
    overflow-y: visible;
  }
  .sign {
    width: 86px !important;
    height: 86px !important;
    background: #f1f2f3 !important;
    border-radius: 11px !important;
  }
  .sign-img {
    width: 67px !important;
    height: 30px !important;
  }
}
.search-title {
  width: 219px;
  height: 33px;
  margin-right: 63px;
  font-family: Poppins, Poppins;
  font-weight: 600;
  font-size: 24px;
  color: #3b3a40;
  line-height: 35px;
  text-align: center;
  font-style: normal;
}

.search-input {
  width: 555px;
  border-radius: 18px;
}

.search-btn {
  height: 23px;
  font-family: Poppins, Poppins;
  font-weight: 600;
  font-size: 16px;
  color: #ffffff;
  line-height: 25px;
  text-shadow: 0px 10px 30px rgba(0, 0, 0, 0.08);
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.sign {
  width: 140px;
  height: 147px;
  background: #f1f2f3;
  border-radius: 20px;
  padding: 19px 15px 20px 15px;
  margin-bottom: 40px;
  &:focus:before {
    display: none !important;
  }
  &:before {
    display: none !important;
  }
}

.brand-name {
  margin-top: 2px;
  text-align: center;
  white-space: nowrap;
  font-size: 10px;
}

.active-brand {
}
</style>
